<template>
  <div class="container">
    <view class="title fz14 bold">问题类型</view>
    <view class="tags flex">
      <view class="tag" @click="current = index" :class="{active: index == current}" v-for="(tag, index) in tags" :key="index">{{tag}}</view>
    </view>

    <view class="title fz14 bold">请描述具体问题</view>
    <view @click="focus=true">
      <uv-textarea @linechange="linechange" @blur="focus=false" :focus='focus' v-model="value" placeholder="请输入内容" autoHeight maxlength="1000" :customStyle="customStyle" count></uv-textarea>
    </view>

    <view class="title fz14 bold">图片说明（0/4）</view>
    <uploader background="#FFDCFB" iconColor="#B140A4"></uploader>

    <view class="actionBtn">
      <uv-button text="提 交" color="#9E06FF" shape="circle"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
import uploader from "@/components/uv/uploader.vue";
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let tags = ref(["功能建议", "操作体验", "界面UI设计"]);
let current = ref(0);
let value = ref("");
let focus = ref(false);
let textareaHeight = ref(150);

let customStyle = computed(() => {
  return {
    background: "#E6E6E6",
    borderRadius: "16px",
    borderColor: "#E6E6E6 !important",
    height: textareaHeight.value + "px",
    marginBottom: "30px",
  };
});

function linechange(e) {
  if (e.detail.height > 150) textareaHeight.value = e.detail.height;
}
</script>



<style lang="scss" scoped>
.container {
  padding: 15px;
  .title {
    margin-bottom: 10px;
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .tag {
      background-color: #f3f3f3;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 4px;
      margin-right: 10px;
      margin-bottom: 10px;
      color: #333333;
    }
    .active {
      color: white !important;
      background-color: #9e06ff !important;
    }
  }
  .actionBtn {
    width: 70%;
    margin: 42px auto 0;
  }
}
</style>





